<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>exercison</title>
    <link rel="stylesheet" href="./CSS/base.css" />
    <link rel="stylesheet" href="" />
  </head>

  <body>
    <!-- 头部导航栏 -->
    <header class="Fix">
      <div class="header">
        <div class="container">
          <!-- 导航 -->
          <div style="display: flex; margin-left: 10px">
            <!-- 图标 -->
            <div style="margin-right: 20px">
              <img
                id="exercison"
                alt="exercison"
                class="main-logo"
                src="./images/logo.svg"
              />
            </div>
            <div class="dropdown nav">
              <span class="nav-element">Learn</span>
              <div class="dropdown-content">
                <ul style="list-style-type: none">
                  <!-- 三个选择 -->
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-1.svg"
                        alt="1"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          Language Tracks
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          Upskill in 65+ languages
                        </p>
                      </div>
                    </a>
                  </li>
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-2.svg"
                        alt="2"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          #48in24 Challenge
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          A different challenge each week in 2024
                        </p>
                      </div>
                    </a>
                  </li>
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-3.svg"
                        alt="3"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          Your Journey
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          Explore your Exercism journey
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="dropdown nav">
              <span class="nav-element">Discover</span>
              <div class="dropdown-content">
                <ul style="list-style-type: none">
                  <!-- 六个选择 -->
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-4.svg"
                        alt="1"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          Language Tracks
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          Upskill in 65+ languages
                        </p>
                      </div>
                    </a>
                  </li>
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-5.svg"
                        alt="2"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          #48in24 Challenge
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          A different challenge each week in 2024
                        </p>
                      </div>
                    </a>
                  </li>
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-6.svg"
                        alt="3"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          Your Journey
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          Explore your Exercism journey
                        </p>
                      </div>
                    </a>
                  </li>
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-7.svg"
                        alt="1"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          Language Tracks
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          Upskill in 65+ languages
                        </p>
                      </div>
                    </a>
                  </li>
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-8.svg"
                        alt="1"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          Language Tracks
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          Upskill in 65+ languages
                        </p>
                      </div>
                    </a>
                    <img
                      src="./images/分享.svg"
                      alt="分享"
                      style="height: 20px; width: 20px"
                    />
                  </li>
                  <li class="lili">
                    <a
                      href="#"
                      style="
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="./images/1-9.svg"
                        alt="1"
                        style="height: 40px; width: 40px; margin-left: 5px"
                      />
                      <div style="text-align: left">
                        <h6
                          style="
                            margin-top: 20px;
                            padding-bottom: 0px;
                            margin-bottom: 0px;
                          "
                        >
                          Language Tracks
                        </h6>
                        <p
                          style="
                            font-size: smaller;
                            margin-top: 0px;
                            padding-top: 0px;
                          "
                        >
                          Upskill in 65+ languages
                        </p>
                      </div>
                    </a>
                    <img
                      src="./images/分享.svg"
                      alt="分享"
                      style="height: 20px; width: 20px"
                    />
                  </li>
                </ul>
              </div>
            </div>
            <div class="dropdown nav">
              <span class="nav-element">Contribute</span>
            </div>
            <div class="dropdown nav">
              <span class="nav-element">More</span>
            </div>
          </div>
          <!-- 深色模式图标 -->
          <div style="margin-left: 30px">
            <label class="switch">
              <input type="checkbox" id="toggleSwitch" />
              <span class="slider"></span>
            </label>
          </div>
          <div class="auth-buttons">
            <a class="btn-p" href="">sign up</a>
            <a class="btn-s" href="">log in</a>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <div style="background-color: rgb(255, 255, 255); height: auto">
      <header class="c-header">
        <div class="container">
          <!-- 左半部分 缩小要保留 -->
          <div class="left-div">
            <h1 style="margin-top: 12px; font-size: 48px">
              Get really good at programming
            </h1>
            <p class="left-div-p">
              Develop fluency in 69 programming languages with our unique blend
              of learning, practice and mentoring. Exercism is fun, effective
              and 100% free, forever.
            </p>
            <div class="Sign">
              <a href="#" class="btn-new1">Sign up for free</a>
              <a href="#" class="btn-new2">Explore languages</a>
            </div>
            <div class="intro">
              <div class="intro-div">
                <img
                  src="./images/logo.svg"
                  alt="logo"
                  style="
                    height: 30px;
                    width: 150px;
                    margin-right: 35px;
                    margin-bottom: 5px;
                  "
                />
                <div class="intro-div">
                  <p class="intro-p">
                    is an independent, community funded, not-for-profit
                    organisation.
                  </p>
                  <a href="#" class="intro-a">Learn More</a>
                </div>
              </div>
              <div class="circle">🦄</div>
            </div>
          </div>
          <!-- 右半部分 -->
          <div class="right-div">
            <img src="./images/1-20.svg" alt="show" class="right-img" />
          </div>
        </div>
      </header>
    </div>

    <!-- 可复用 -->
    <div class="header">
      <section class="tracks-section">
        <div
          style="
            display: flex;
            align-items: center;
            width: 1150px;
            justify-content: space-around;
          "
        >
          <img src="./images/background-1.svg" alt="bei1" class="li-img1" />
          <div class="lg-container">
            <div class="section-header">
              <div class="section-header-1">
                <img
                  src="./images/2-1.svg"
                  alt="包裹"
                  style="width: 36px; height: 36px"
                />
              </div>
              <h2 class="section-header-2">
                Explore and get fluent in 69 programming languages
              </h2>
              <hr class="section-header-3" />
            </div>
          </div>
          <img src="./images/background-2.svg" alt="bei2" class="li-img2" />
        </div>
        <div class="langu">
          <a href="#" class="track">
            <img src="./images/bash.svg" alt="bash" />
            <div class="title">Bash</div>
          </a>
          <a href="#" class="track">
            <img src="./images/c.svg" alt="C" />
            <div class="title">C</div>
          </a>
          <a href="#" class="track">
            <img src="./images/cpp.svg" alt="Cpp" />
            <div class="title">Cpp</div>
          </a>
          <a href="#" class="track">
            <img src="./images/csharp.svg" alt="csharp" />
            <div class="title">Csharp</div>
          </a>
          <a href="#" class="track">
            <img src="./images/go.svg" alt="Go" />
            <div class="title">Go</div>
          </a>
          <a href="#" class="track">
            <img src="./images/java.svg" alt="Java" />
            <div class="title">Java</div>
          </a>
          <a href="#" class="track">
            <img src="./images/javascript.svg" alt="javascript" />
            <div class="title">Javascript</div>
          </a>
          <a href="#" class="track">
            <img src="./images/php.svg" alt="php" />
            <div class="title">Php</div>
          </a>
          <a href="#" class="track">
            <img src="./images/python.svg" alt="python" />
            <div class="title">Python</div>
          </a>
          <a href="#" class="track">
            <img src="./images/ruby.svg" alt="ruby" />
            <div class="title">Ruby</div>
          </a>
          <a href="#" class="track">
            <img src="./images/rust.svg" alt="rust" />
            <div class="title">Rust</div>
          </a>
          <a href="#" class="track">
            <img src="./images/typescript.svg" alt="typescript" />
            <div class="title">Typescript</div>
          </a>
        </div>
        <div class="cta">
          <a href="#" class="c-link">
            <span>See all 69 Language Tracks</span>
            <img
              src="./images/arrow.svg"
              alt="arrow"
              style="width: 10px; margin-left: 10px; fill: rebeccapurple"
            />
          </a>
        </div>
      </section>
    </div>

    <div class="header">
      <section class="exercises-section">
        <div class="lg-container">
          <div class="top-div">
            <div class="top-left-div">
              <div class="section-header left">
                <div
                  style="
                    height: 80px;
                    margin-bottom: 16px;
                    width: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-image: url(./images/3-1.svg);
                  "
                >
                  <img src="./images/3-2.svg" alt="哑铃" style="height: 50px" />
                </div>
                <h2 style="text-align: left">
                  Over 5725 coding exercises. From "Allergies" to "Zebra
                  Puzzle".
                </h2>
                <hr class="c-divider" />
                <p
                  style="
                    font-size: 20px;
                    line-height: 160%;
                    margin: 0;
                    text-align: left;
                  "
                >
                  Learn by doing. Get better at programming through fun coding
                  exercises that build your understanding of concepts.
                </p>
              </div>
              <div class="exercises">
                <div class="exercise">
                  <img src="./images/3-3.svg" alt="脑子" class="brain" />
                  <div class="tracks-section no-mp">
                    <div class="left-div">
                      <h3 style="margin: 0">Allergies</h3>
                      <p class="left-div-p2">
                        Given a person's allergy score, determine whether or not
                        they're allergic to a given item, and their full list of
                        allergies.
                      </p>
                    </div>
                    <div class="more-choices">
                      <div class="img-box">
                        <img src="./images/bash.svg" alt="1" class="example" />
                        <img
                          src="./images/javascript.svg"
                          alt="2"
                          class="example"
                        />
                        <img src="./images/3-4-3.svg" alt="3" class="example" />
                      </div>
                      <div class="More-d">+40 more</div>
                    </div>
                  </div>
                </div>
                <div class="exercise">
                  <img src="./images/3-3.svg" alt="脑子" class="brain" />
                  <div class="tracks-section no-mp">
                    <div class="left-div">
                      <h3 style="margin: 0">Queen Attack</h3>
                      <p class="left-div-p2">
                        Given the position of two queens on a chess board,
                        indicate whether or not they are positioned so that they
                        can attack each other
                      </p>
                    </div>
                    <div class="more-choices">
                      <div class="img-box">
                        <img src="./images/bash.svg" alt="1" class="example" />
                        <img
                          src="./images/javascript.svg"
                          alt="2"
                          class="example"
                        />
                        <img src="./images/3-4-3.svg" alt="3" class="example" />
                      </div>
                      <div class="More-d">+60 more</div>
                    </div>
                  </div>
                </div>
                <div class="exercise">
                  <img src="./images/3-3.svg" alt="脑子" class="brain" />
                  <div class="tracks-section no-mp">
                    <div class="left-div">
                      <h3 style="margin: 0">Zebra Puzzle</h3>
                      <p class="left-div-p2">
                        Which of the residents drinks water? Who owns the zebra?
                        Can you solve the Zebra Puzzle with code?
                      </p>
                    </div>
                    <div class="more-choices">
                      <div class="img-box">
                        <img src="./images/bash.svg" alt="1" class="example" />
                        <img
                          src="./images/javascript.svg"
                          alt="2"
                          class="example"
                        />
                        <img src="./images/3-4-3.svg" alt="3" class="example" />
                      </div>
                      <div class="More-d">+70 more</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <img src="./images/3-5.webp" alt="整体展示" class="all-show" />
          </div>
          <div class="features">
            <div class="feature">
              <img src="./images/4-1.svg" alt="1" style="margin-bottom: 15px" />
              <h3 style="color: #130b43; font-size: 20px; font-weight: 600">
                Write code locally, in your own space
              </h3>
              <p style="font-size: 15px; line-height: 150%">
                Exercism is primarily built as a CLI-first tool. Download and
                submit exercises right from your terminal.
              </p>
            </div>
            <div class="feature">
              <img src="./images/4-2.svg" alt="2" style="margin-bottom: 15px" />
              <h3 style="color: #130b43; font-size: 20px; font-weight: 600">
                Use the Exercism in-browser editor
              </h3>
              <p style="font-size: 15px; line-height: 150%">
                Don't spend hours installing a language locally just to try it
                out. We support all 69 of our programming languages in our
                in-browser editor.
              </p>
            </div>
            <div class="feature">
              <img src="./images/4-3.svg" alt="3" style="margin-bottom: 15px" />
              <h3 style="color: #130b43; font-size: 20px; font-weight: 600">
                Get automated analysis on your code
              </h3>
              <p style="font-size: 15px; line-height: 150%">
                Not quite sure how well you've done? We run automatic analysis
                on your solutions to give you quick feedback and points of
                improvement.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <div class="header">
      <div class="tracks-section">
        <div
          style="
            display: flex;
            align-items: center;
            width: 1440px;
            justify-content: space-around;
          "
        >
          <img src="./images/background-1.svg" alt="bei1" class="li-img1" />
          <div class="section-header1">
            <img src="./images/讨论.svg" alt="讨论" />
            <div class="section-header left">
              <div
                style="
                  height: 80px;
                  margin-bottom: 16px;
                  width: 80px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background-image: url(./images/3-1.svg);
                "
              >
                <img src="./images/3-2.svg" alt="哑铃" style="height: 50px" />
              </div>
              <h2 style="text-align: left">
                Over 5725 coding exercises. From "Allergies" to "Zebra Puzzle".
              </h2>
              <hr class="c-divider" />
              <p
                style="
                  font-size: 20px;
                  line-height: 160%;
                  margin: 0;
                  text-align: left;
                "
              >
                Learn by doing. Get better at programming through fun coding
                exercises that build your understanding of concepts.
              </p>
            </div>
          </div>
          <img src="./images/background-2.svg" alt="bei2" class="li-img2" />
        </div>
        <img
          src="./images/大背景.webp"
          alt="大背景"
          style="
            width: 95%;
            box-shadow: #eae3ef 4px 4px 15px 10px;
            margin-top: 20px;
          "
        />
        <div style="display: flex; align-items: center; flex-direction: column">
          <h3
            style="
              font-size: 31px;
              color: var(--textColor1);
              font-weight: 700;
              line-height: 140%;
            "
          >
            Why mentoring?
          </h3>
          <hr class="c-divider" />
        </div>
        <div class="features">
          <div class="feature">
            <img src="./images/4-1.svg" alt="1" style="margin-bottom: 15px" />
            <h3 style="color: #130b43; font-size: 20px; font-weight: 600">
              Write code locally, in your own space
            </h3>
            <p style="font-size: 15px; line-height: 150%">
              Exercism is primarily built as a CLI-first tool. Download and
              submit exercises right from your terminal.
            </p>
          </div>
          <div class="feature">
            <img src="./images/4-2.svg" alt="2" style="margin-bottom: 15px" />
            <h3 style="color: #130b43; font-size: 20px; font-weight: 600">
              Use the Exercism in-browser editor
            </h3>
            <p style="font-size: 15px; line-height: 150%">
              Don't spend hours installing a language locally just to try it
              out. We support all 69 of our programming languages in our
              in-browser editor.
            </p>
          </div>
          <div class="feature">
            <img src="./images/4-3.svg" alt="3" style="margin-bottom: 15px" />
            <h3 style="color: #130b43; font-size: 20px; font-weight: 600">
              Get automated analysis on your code
            </h3>
            <p style="font-size: 15px; line-height: 150%">
              Not quite sure how well you've done? We run automatic analysis on
              your solutions to give you quick feedback and points of
              improvement.
            </p>
          </div>
        </div>
      </div>
    </div>

    <footer
      style="
        display: block;
        background-color: #130b43;
        justify-content: center;
        align-items: center;
      "
    >
      <div class="footer-top">
        <div class="footer-top footer-top-more">
          <div class="footer-top-left">
            <img src="./images/logo-2.png" alt="logo" style="height: 30px" />
            <h2
              style="
                color: white;
                font-size: 24px;
                margin-bottom: 5px;
                text-align: left;
              "
            >
              Code practice and mentorship for everyone
            </h2>
            <p
              style="
                font-size: 18px;
                line-height: 150%;
                color: white;
                text-align: left;
              "
            >
              Develop fluency in 69 programming languages with our unique blend
              of learning, practice and mentoring. Exercism is fun, effective
              and 100% free, forever.
            </p>
          </div>
          <div class="footer-top-right">
            <a href="#" class="sign-3">Sign up for free</a>
            <a href="#" class="Explore-3">Explore languages</a>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer-bottom-more">
          <hr />
          <div class="cols">
            <div class="col-n">
              <h3 style="color: white">Editions</h3>
              <hr class="c-divider-2" />
              <ul
                style="list-style-type: none; padding-left: 0; margin-left: 0"
              >
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism for Teams</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism Reacher</a
                  >
                </li>
              </ul>
            </div>
            <div class="col-n">
              <h3 style="color: white">Editions</h3>
              <hr class="c-divider-2" />
              <ul
                style="list-style-type: none; padding-left: 0; margin-left: 0"
              >
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism for Teams</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism Reacher</a
                  >
                </li>
              </ul>
            </div>
            <div class="col-n">
              <h3 style="color: white">Editions</h3>
              <hr class="c-divider-2" />
              <ul
                style="list-style-type: none; padding-left: 0; margin-left: 0"
              >
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism for Teams</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism Reacher</a
                  >
                </li>
              </ul>
            </div>
            <div class="col-n">
              <h3 style="color: white">Editions</h3>
              <hr class="c-divider-2" />
              <ul
                style="list-style-type: none; padding-left: 0; margin-left: 0"
              >
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism for Teams</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism Reacher</a
                  >
                </li>
              </ul>
            </div>
            <div class="col-n">
              <h3 style="color: white">Editions</h3>
              <hr class="c-divider-2" />
              <ul
                style="list-style-type: none; padding-left: 0; margin-left: 0"
              >
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism for Teams</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism Reacher</a
                  >
                </li>
              </ul>
            </div>
            <div class="col-n">
              <h3 style="color: white">Editions</h3>
              <hr class="c-divider-2" />
              <ul
                style="list-style-type: none; padding-left: 0; margin-left: 0"
              >
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism for Teams</a
                  >
                </li>
                <li>
                  <a href="#" style="text-decoration: inherit; color: white"
                    >Exercism Reacher</a
                  >
                </li>
              </ul>
            </div>
          </div>

          <div class="socials">
            <a href="#" class="icon-1">
              <img src="./images/6-1.svg" alt="1" class="icon" />
            </a>
            <a href="#" class="icon-2">
              <img src="./images/6-2.svg" alt="2" class="icon" />
            </a>
            <a href="#" class="icon-3">
              <img src="./images/6-3.svg" alt="3" class="icon" />
            </a>
          </div>
          <hr />
          <div class="footer-bottom">
            <div
              style="display: flex; text-align: start; flex-direction: column"
            >
              <h2 style="margin: 0; color: white">
                Our programming language tracks
              </h2>
              <hr class="c-divider-2" />
            </div>
            <div class="site-link">
              <div class="cols">
                <div class="col-n">
                  <ul>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                  </ul>
                </div>
                <div class="col-n">
                  <ul>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                  </ul>
                </div>
                <div class="col-n">
                  <ul>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                  </ul>
                </div>
                <div class="col-n">
                  <ul>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                  </ul>
                </div>
                <div class="col-n">
                  <ul>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                    <li>
                      <a href="#" class="col-n-a">lce</a>
                    </li>
                  </ul>
                </div>
                <div class="col-n">
                  <h3 style="font: weight 600px; font-size: 16px; color: white">
                    Want to add a language track to Exercism?
                  </h3>
                  <a
                    href="#"
                    style="
                      font-size: 16px;
                      line-height: 160%;
                      color: white;
                      text-decoration: inherit;
                    "
                    >Start a new topic in the forum and let's discuss it.</a
                  >
                </div>
              </div>
            </div>
          </div>
          <hr />
          <div class="legals">
            <div style="color: rgb(225 235 255)">
              Exercism is a not-for-profit organisation registered in the UK.
              Its trustees are Katrina Owen, Jeremy Walker and Erik Schierboom.
            </div>
            <div style="color: rgb(225 235 255); margin-left: auto">
              © 2024 Exercism
            </div>
          </div>
        </div>
      </div>
    </footer>

    <button id="backToTopBtn" onclick="scrollToTop()"></button>

    <script>
      // 显示选项栏
      function toggleTooltip() {
        var tooltip = document.getElementById("tooltip");
        if (tooltip.style.display === "none" || tooltip.style.display === "") {
          tooltip.style.display = "block";
          document.addEventListener("click", closeTooltipOutside);
        } else {
          tooltip.style.display = "none";
          document.removeEventListener("click", closeTooltipOutside);
        }
      }
      // 隐藏选项栏
      function closeTooltipOutside(event) {
        var tooltip = document.getElementById("tooltip");
        var container = document.querySelector(".container");

        if (!container.contains(event.target) && event.target !== tooltip) {
          tooltip.style.display = "none";
          document.removeEventListener("click", closeTooltipOutside);
        }
      }
      function checkWindowSize() {
        var image = document.getElementById("exercison"); // 获取图片元素
        var width =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth; // 获取视口宽度

        if (width > 1200 && width <= 1350) {
          image.src = "./images/单logo.svg";
          image.style.width = "30px";
        } else {
          image.src = "./images/logo.svg";
          image.style.width = "150px";
        }
      }
      // 监听窗口大小变化事件
      window.addEventListener("resize", checkWindowSize);

      // 页面加载时也检查一次窗口大小
      document.addEventListener("DOMContentLoaded", checkWindowSize);

      // 当用户滚动一定距离时显示按钮
      window.onscroll = function () {
        // 监听移动距离
        var currentScrollPos = window.pageYOffset;
        var btn = document.getElementById("backToTopBtn");
        // 显示按钮
        if (currentScrollPos > 100) {
          btn.style.display = "block";
        } else {
          btn.style.display = "none"; //消失按钮
        }
      };

      // 滚动到页面顶部的函数
      function scrollToTop() {
        window.scrollTo({ top: 0, behavior: "smooth" });
      }

      // 获取元素
      var switchButton = document.getElementById("toggleSwitch");
      var header = document.querySelectorAll(".header");
      var tracksSection = document.querySelector(".tracks-section");
      //获取名为navelement的nodelist;
      var navElement = document.querySelectorAll(".nav-element");
      var exercisesSection = document.querySelector(".exercises-section");

      // 给checkbox添加 'change' 事件监听器
      switchButton.addEventListener("change", function () {
        // 检查checkbox的选中状态
        if (this.checked) {
          document.body.style.backgroundColor = "#666"; // 暗色背景
          header.forEach(function (element) {
            element.style.backgroundColor = "#666";
          }),
            (exercisesSection.style.backgroundColor = "#666");
          // navelement的字体颜色变白
          navElement.forEach(function (element) {
            element.style.color = "white";
          });
        } else {
          document.body.style.backgroundColor = "white"; // 亮色背景
          header.forEach(function (element) {
            element.style.backgroundColor = "white";
          }),
            //(tracksSection.style.backgroundColor = "white");
            (exercisesSection.style.backgroundColor = "white");
          navElement.forEach(function (element) {
            element.style.color = "#5c5589";
          });
        }
      });
    </script>
  </body>
</html>
